<template>
  <q-page v-loading="loading">
    <div style="position: relative;">
      <div class="nav">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <el-image src="/svgs/titleIcon.svg" style="width: 18px;" fit />
            </el-breadcrumb-item>
            <el-breadcrumb-item>数据中心</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'featureset' }">特征库</el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #333;">特征集详情</span></el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="row q-gutter-lg justify-between topData">
        <div class="col ">
          <div class="title" style="text-align: left;">数据信息</div>
          <div><span style="color: #666">ID</span>:{{ tableData.id }}</div>
          <div><span style="color: #666">特征库名称</span>：{{ tableData.title }}</div>
          <div><span style="color: #666">原始数据类型</span>：{{ tableData.data_title }}</div>
          <div><span style="color: #666">说明</span>：{{ tableData.description }}</div>
<!--          <div>已标注：{{ tableData.data_statistic.total_number }}</div>-->
        </div>
        <div class="col ">
          <div class="title" style="text-align: left;">运行状态</div>
          <div style="margin-bottom: 5px;" v-for="(item, index) in topTestData.slice(0, 3)" :key="index">
            <img style="width: 20px;vertical-align: middle;margin-right: 2px;" :src="'/svgs/feature'+(index+1)+'.svg'" />
            <!--<img style="width: 20px;vertical-align: middle;margin-right: 2px;" src="/svgs/success.svg" />-->
            {{ item }}
          </div>
          <template v-if="tableData.status == 'completed'">
            <div :class="tableData.status == 'completed' ? '' : 'errorState '" style="margin-bottom: 5px;"
              v-for="(item, index) in topTestData.slice(3, 5)" :key="index">
              <img style="width: 20px;vertical-align: middle;margin-right: 2px;" :src="'/svgs/feature'+(index+4)+'.svg'" />
              {{ item }}
            </div>
          </template>
        </div>
        <div class="col ">
          <div class="title" style="text-align: left;">数据信息</div>
          <div class="rightBox">
            <div style="width: 30%;">
              <div>状态：已处理</div>
<!--              <div>总量：{{ tableData.data_statistic.total_number }}</div>-->
              <div>随机： <el-switch disabled v-model="tableData.is_random" style="cursor: initial;" /></div>
            </div>
            <div style="width: 60%;margin-top: -40px;">
              <chart-line :chartOption="chartOption2" :chartSize="chastSize2" ref="chartBox"></chart-line>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 10px; width: 100%; background-color: rgb(247, 248, 250);"></div>
      <div class="bottomData">
        <box-loading v-if="boxLoadState" @click.stop></box-loading>
        <el-menu :default-active="activeIndex" class="el-menu-demo textNoSelect" mode="horizontal" @select="handleSelect"
          style="margin-bottom: 20px;">
          <el-menu-item index="train">
            <img style="width: 15px;vertical-align: middle;margin-right: 5px;"
              src="/svgs/exercise.svg" />训练集</el-menu-item>
            <el-menu-item index="validate">
              <img style="width: 15px;vertical-align: middle;margin-right: 5px;" src="/svgs/beaker.svg" />验证集</el-menu-item>
            </el-menu>
        <div v-if="setDataType == 'Image'">
          <el-row :gutter="20" v-if="chooseNumber == 'train'">
            <el-col class="col_box_5" :span="5" v-for="item in bottomTabelData.results" :key="item">
              <div class="contentBox">
                <el-image :src="item.data.url" fit="contain" />
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="chooseNumber == 'validate'">
            <el-col :span="4" v-for="item in bottomTabelData.results" :key="item">
              <div class="contentBox">
                <el-image :src="item.data.url" fit="contain" />
              </div>
            </el-col>
          </el-row>
          <Transition name="el-fade-in-linear">
            <div class="noDataBox" v-if="noData">暂无数据</div>
          </Transition>
        </div>
        <div v-else>
          <el-row :gutter="20" >
            <div class="textDataBox textColor" v-if="bottomTabelData.results && bottomTabelData.results.length>0">
              <el-table :data="bottomTabelData.results" border style="width: 100%">
                <el-table-column prop="id" label="ID" width="180"/>
                <el-table-column prop="data.text" label="文件路径">
                  <template #default="scope">
                    <div class="col fileName" :title="scope.row.data.text">{{ scope.row.data.text }} </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-row>
          <Transition name="el-fade-in-linear">
            <div class="noDataBox" v-if="noData">暂无数据</div>
          </Transition>
        </div>
        <div class="row" style="justify-content:flex-end;" v-if="bottomTabelData.results.length>0">
          <el-pagination
            background
            layout="prev, pager, next, sizes, jumper"
            :total="bottomTabelData.count"
            style="margin-bottom: 20px ;"
            v-model:current-page="pageDataValue.page"
            v-model:page-size="pageDataValue.page_size"
            :page-sizes="[10, 20, 50]"
            @size-change="sizeChange"
            :current-page="pageDataValue.page"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import {ref, reactive, shallowRef} from 'vue';
import { useRouter } from 'vue-router';
import chartLine from 'src/components/chartLine.vue';
import { getFeatureDetail, getSetData } from 'src/api/dataset'
import { dataSetStore } from 'src/stores/dataSet';
import boxLoading from 'src/components/boxLoading.vue';
import titleIcon from 'assets/dataSet/titleIcon.png'
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
const loading = ref(false)
const noData = ref(false)
const boxLoadState = ref(false)
const activeIndex = ref('train')
const chooseNumber = ref('train')
const topTestData = ref(['拆分原数据', '转换数据', '转换执行中', '数据打包', '数据打包完成'])
const setDataType = ref('')
const bottomTabelData = shallowRef({
  count: 0,
  results: <any>[]
})
const tableData = shallowRef({
  id: '',
  title: '',
  data_title: '',
  status: '',
  description: '',
  data_statistic: {
    total_number: 0,
    train_number: 0,
    validate_number: 0
  },
  is_random: false
})
const chastSize2 = reactive({
  width: '100%',
  height: "180px"
});
const chartOption2 = reactive({
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '数据图形',
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 4,
        borderColor: '#fff',
        borderWidth: 1,
        color: function (params: any) {
          var colorList = ['#5087ec', '#ff9999'];
          return colorList[params.dataIndex]
        }
      },
      data: [
        { value: 0, name: '训练集' },
        { value: 0, name: '验证集' },
      ],
    }
  ]
})
const chartBox = ref()
const pageDataValue = ref({
  page: 1,
  page_size: 10
})

getData()
function getData() {
  loading.value = true
  getFeatureDetail(projectId, dataSetStore().feature_id).then((res: any) => {
    tableData.value = res.data;
    setDataType.value = res.data.data_type;
    chartOption2.series[0].data[0].value = tableData.value.data_statistic.train_number
    chartOption2.series[0].data[1].value = tableData.value.data_statistic.validate_number
    chartBox.value?.init()
  }).catch(error => {
    console.log(error)
  }).finally(() => {
    loading.value = false
  })
}
// 切换页
function changePage(currentPage: any) {
  pageDataValue.value.page = currentPage;
  setData(chooseNumber.value)
}
function sizeChange(pageSize:any) {
  pageDataValue.value.page_size = pageSize
  pageDataValue.value.page = 1;
  setData(chooseNumber.value);
}

setData('train')
setData('validate')
function setData(str: string) {
  noData.value = false
  boxLoadState.value = true;
  loading.value = true;
  let obj = {
    type: str
  }
  obj = Object.assign(obj, pageDataValue.value)
  bottomTabelData.value.results = []
  getSetData(projectId, dataSetStore().feature_id, obj).then((res: any) => {
    if( !res.data ){
      bottomTabelData.value.results = []
    }else {
      let dataList:any = res.data;
      dataList.results.forEach((item:any) =>{
        if( item.data.url ){
          item.data.text = item.data.url;
        }
      });
      bottomTabelData.value = dataList;
      if( str === 'train' ){
        chartOption2.series[0].data[0].value = bottomTabelData.value.count;
      }else{
        chartOption2.series[0].data[1].value = bottomTabelData.value.count;
      }
    }
    boxLoadState.value = false;
    if (res.data.results.length == 0) noData.value = true
  }).catch(error => {
    console.log(error)
  }).finally(() => {
    boxLoadState.value = false;
    loading.value = false;
  })
}

const handleSelect = (key: string, keyPath: string[]) => {
  chooseNumber.value = key
  setData(key)
}
</script>

<style scoped lang="scss">
.nav {
  display: flex;
  align-items: center;
  padding-left: 20px;
  cursor: pointer;
  background-color: #f6f8fa;
  height: 46px;
  ::v-deep .el-breadcrumb{
    display: flex;
    align-items: center;
  }
}
::v-deep .el-breadcrumb__inner{
  font-size: 14px!important;
}
::v-deep .el-menu-item.is-active{
  border-bottom: none!important;
  background: #3d5ce41a!important;
}
::v-deep .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a{
  font-weight: normal!important;
}
.topData {
  width: 100%;
  margin-bottom: 20px;
  color: #101010;
  padding: 16px;
  .title {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .col {
    padding: 20px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
    min-height: 200px;

    &:nth-child(1) {
      div {
        margin-bottom: 5px;
      }
    }
  }

  .rightBox {
    width: 100%;
    display: flex;

    &::v-deep .el-switch.is-disabled .el-switch__core,
    .el-switch.is-disabled .el-switch__label {
      cursor: initial !important;
    }
  }

  .errorState {
    cursor: not-allowed;
    opacity: 0.7;
    filter: grayscale(1);
  }
}
.fileName{
  cursor: pointer;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设置最大显示行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.bottomData {
  width: 100%;
  padding: 16px;
  border-radius: 3px;
  min-height: 350px;
  position: relative;

  .contentBox {
    margin: 0 auto;
    height: 200px;
    text-align: center;
    box-shadow: 0 0 1px 1px #ccc;
    padding: 10px;
  }

  .textDataBox {
    padding: 0 10px;
    width: 100%;
    margin-bottom:20px;

    // div {
    //   height: 35px;
    //   line-height: 30px;
    //   margin-bottom: 10px;
    //   border-bottom: 1px solid #eee;
    //   box-shadow: 0 1px 3px 1px #eee;
    //   padding: 4px;
    //   border-radius: 4px;
    // }
  }

  .el-col {
    margin-bottom: 20px;

    .el-image {
      height: 180px;
    }
  }

  .noDataBox {
    margin: 50px 0;
    text-align: center;
    font-size: 18px;
  }

  .col_box_5 {
    width: 20%;
    max-width: 20%;
  }
}</style>
